<template>
    <div class="container">
        <el-card class="box-card" :body-style="{ padding: '10px 10px 6px 10px' }">
            <el-row>
                <el-col :span="5"><el-image style="width: 250px; height: 150px" :src="knowledgeList.url" :fit="fit" /></el-col>
                <el-col :span="19">
                    <div class="t_box">
                        <h3 class="title" @click="toKnowledgeDetail(knowledgeList)">
                          {{ knowledgeList.title }}</h3>
                        <p>
                            {{ knowledgeList.p }}
                        </p>
                        <div class="name">{{ knowledgeList.name }}
                        </div>
                        <div class="time">{{ knowledgeList.time }}</div>
                        <!-- <div class="time">{{ knowledgeList.detail }}</div> -->
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import { onMounted } from '@vue/runtime-core'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: 'ideaCard',
  props: {
    knowledgeList: {
      type: Object
    },
    KnowledgeDetail: {
      type: Array
    }
  },
  setup () {
    const router = useRouter()
    const store = useStore()
    function toKnowledgeDetail (knowledgeList) {
      // console.log(knowledgeList.detail)
      store.commit('knowLedge/SETKNOWLEDGEDETAILLIST', knowledgeList)
      router.push({ path: '/KnowledgeDetail' })
    }
    onMounted(() => {
    })
    return { toKnowledgeDetail }
  }
}
</script>

<style scoped lang="less">
.box-card{
    width: 100% !important;
    .t_box{
        padding-left: 15px;
        .title{
            cursor:pointer;
            padding-bottom: 15px;
            color: #333;
            font-size: 22px;
            font-family: "微软雅黑";
            font-weight: bold;
        }
        p{
            line-height: 28px;
            color: #666;
            font-size: 14px;
        }
        .name{
            color: #333;
            font-size: 14px;
            margin-top: 25px;
        }
        .time{
                // margin-left: 25px;
                color: #999;
            }
    }
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>
